<!--  -->
<template>
  <div class="second-div" >
      <el-card shadow="never">
        <ul>
          <li v-for="(item, index) in bavdata" :key="index">
            <el-link
              :underline="false"
              class="bav el-icon-menu"
              :class="[{ active: isbav == index }, item.class]"
              @click="setIsbav(index)"
              >&nbsp&nbsp{{ item.name }}</el-link
            >
          </li>
        </ul>
      </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["numbav"],
  data() {
    //这里存放数据
    return {
      isbav: 0,
      bavdata: [
        { name: "班级", route: "teacherclass", class: "el-icon-menu" },
        { name: "作业", route: "teachertask", class: "el-icon-edit-outline" },
        { name: "题库", route: "teacherManageTopic", class: "el-icon-edit" },
        { name: "签到", route: "teachersignin", class: "el-icon-date" },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    setIsbav(index) {
      if (this.isbav != index) {
        this.isbav = index;
        var routerName = this.bavdata[index].route;
  
        this.$router.push({ name: routerName, query: { courseid:this.$route.query.courseid,courseName:this.$route.query.courseName,isbav: index } });
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.isbav = this.numbav;
    if(this.$route.query.courseid == null){
      this.$router.replace({name:404});
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.second-div {
}
ul {
  list-style-type: none;
}
li {
  margin-top: 24px;
}
.bav {
  background-size: 1600%;
  vertical-align: middle;
  color: rgb(71, 76, 89);
  font-size: 20px;
  //  font-stretch: 100%;
  font-weight: 400;
  height: 54px;
  font-family: "微软雅黑";
}
.bav:hover{
    color: #474c59;
  text-decoration: none !important;
}
.active {
  color: #17B3A3;
  //   background: #f0f6ff;
}
</style>